<template>
  <div id="left1" style="width: 100%;height: 100%;"> 
  </div>
</template>

<script>
import { Line } from '@antv/g2plot';
import {get} from '@/utils/request';
import moment from 'moment'
  export default {
    data(){
      return{
        todatData:[

        ]
      }
    },
  async  mounted(){
   await this.gettodaydata();
    await this.initleft1();
    },
    methods:{
      initleft1(){
        const line = new Line('left1', {
          data:this.todatData,
          xField: 'year',
          yField: 'value',
          label: {},
          point: {
            size: 5,
            shape: 'diamond',
            style: {
              fill: 'white',
              stroke: '#5B8FF9',
              lineWidth: 2,
            },
          },
          xAxis:{
            label: {
            style: {
              fill: 'white',
              }
             }
          },
          yAxis:{
            label: {
            style: {
              fill: 'white',
              }
             }
          },
         tooltip: { showMarkers: false },
         formatter: (datum) => {
                  return { name: "温度", value: datum.value +"℃" };
                 },
                  state: {
                   active: {
                    style: {
                      shadowBlur: 4,
                      stroke: '#000',
                       fill: 'red',
                         },
                         },
                          },
             interactions: [{ type: 'marker-active' }],
        });

          line.render();
      },
     async gettodaydata(){
        let params={
          page:1,
          pageSize:10,

        }
        let res=await get('/dashboard/pageQueryTodayData',params)
      this.todatData=res.data.list.map(item=>{
        return{
          year:this.$options.filters.fmtDate(item.insert_time),
          value:item.temperature
        }
      })
      console.log(this.todatData);
      }
    },
    // 局部注册
  filters: {
    fmtDate(date) {
      return moment(date).format("HH:mm");
      // 或者return自己编写的时间处理函数
    },
  },
    
  }
</script>

<style scoped>

</style>